<template>
  <view>
    <view class="header">

      <u-search :inputStyle="{	fontFamily: 'PingFang SC'}" :actionStyle="{
				background: '#FFFFFF',
				width: '140rpx',
                height: '60rpx',
				lineHeight: '60rpx',
				fontFamily: 'PingFang SC',
				borderRadius: '30rpx',
			    alignItems: 'center',
			    textAlign: 'center'
			    }" placeholder="请输入类别" inputAlign="center" v-model="model" height="70" actionText="查询" @custom="custom">
      </u-search>

    </view>
    <view class="content-box">

      <!-- <u--image :src="windIo.pic_url" width="80px" height="80px" mode="widthFit" @click="imgClick">
			</u--image> -->
      <view class="title">{{windIo.model}}</view>
      <view class="content">{{windIo.content}}</view>
    </view>
    <view>

      <!-- <u-cell-group>

				<u-cell>
					<view slot="title" class="cell-title">
						类别
					</view>
					<text slot="value" class="cell-value">{{windIo.type}}</text>
				</u-cell>
				<u-cell>
					<view slot="title" class="cell-title">
						类别属性
					</view>
					<text slot="value" class="cell-value">{{windIo.type_content}}</text>
				</u-cell>
				<u-cell>
					<view slot="title" class="cell-title">
						通道数
					</view>
					<text slot="value" class="cell-value">{{windIo.channels}}</text>
				</u-cell>
				<u-cell>
					<view slot="title" class="cell-title">
						E-bus电耗
					</view>
					<text slot="value" class="cell-value">{{windIo.ebus_power}}</text>
				</u-cell>

				<u-cell url="http://www.baidu.com">
					<view slot="title" class="cell-title">
						参数简介
					</view>
					<text slot="value" @click="argsLink" class="cell-value">链接</text>
				</u-cell>
			</u-cell-group> -->
    </view>
    <u-picker :show="show" ref="uPicker" keyName="type" :columns="columns" @confirm="confirm" @cancel="cancel">
    </u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: "",
        windIos: [],
        windIo: {

          type: "",
          type_content: "",
          channels: "",
          ebus_power: "",
          leds: "",
          pic_url: "",
          content: "",
          code_url: ""
        },
        show: false,
        columns: [
          []
        ],
      }
    },
    mounted() {},
    onLoad(option) {


    },
    methods: {
      argsLink() {
        // #ifdef APP-PLUS
        plus.runtime.openURL(this.windIo.code_url)
        // #endif
        // #ifdef H5
        window.open(this.windIo.code_url)
        // #endif
        // #ifdef MP
        uni.setClipboardData({
          data: this.windIo.code_url,
          success: () => {
            uni.hideToast();
            this.$nextTick(() => {
              this.$u.toast('链接已复制，请在浏览器打开');
            })
          }
        });
        // #endif
      },
      imgClick() {
        wx.previewImage({
          urls: [this.windIo.pic_url], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
          current: '', // 当前显示图片的http链接，默认是第一个
          success: function(res) {},
          fail: function(res) {},
          complete: function(res) {},
        })

      },
      custom(e) {
        console.log(e, 'ddd')
        this.getWindIos(this.model);

      },
      confirm(e) {
        console.log('confirm', e);
        this.windIo = e.value[0];
        this.show = false;
      },
      cancel(e) {
        this.show = false;
      },

      getWindIos(model) {

        let that = this;
        uni.showLoading();

        const requestTask = uni.request({
          url: this.baseUrl + '/api/v1/toolset/getWindIos?model=' + model,
          success: function(res) {
            uni.hideLoading();
            var data = res.data.data;
            console.log(data, "数据");
            if (data.length == 0) {
              that.show = false;
            } else if (data.length == 1) {
              that.show = false;
              that.windIo = data[0];
            } else {
              that.windIos = data;
              that.columns[0] = data;
              that.show = true;
            }
          },
          complete: () => {
            uni.hideLoading();
          }
        });
      }

    },
  }
</script>



<style lang="scss">
  .header {
    background-color: #3BA2FF;
    padding-top: 24rpx;
    padding-bottom: 24rpx;
    padding-left: 20rpx;
    padding-right: 20rpx;
    align-items: center;
    justify-content: center;

    display: flex;
  }

  .cell-text {

    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 48px;

  }

  .content-box {
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    padding: 30rpx;

    .content {

      font-size: 22rpx;
      font-family: PingFang SC;

      color: #808080;
    }

    .title {

      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 48rpx;
    }


  }

  .cell-title {

    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
  }

  .cell-value {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
  }
</style>
